---
title: Thanh Tiến Trình
image: /images/user-guide/api/api.png
---

<Frame>
  <img src="/images/user-guide/api/api.png" alt="Header" />
</Frame>

Hiển thị tiến trình thông qua một chuỗi các bước được đánh số bằng cách làm nổi bật bước đang hoạt động. Nó tạo một hộp chứa với các bước, mỗi bước được đại diện bởi thành phần `Step`.

<Tabs>
<Tab title="Usage">

```jsx
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";

export const MyComponent = () => {
  return (
    <StepBar activeStep={2}>
      <StepBar.Step>Step 1</StepBar.Step>
      <StepBar.Step>Step 2</StepBar.Step>
      <StepBar.Step>Step 3</StepBar.Step>
    </StepBar>
  );
};
```

</Tab>

<Tab title="Props">

| Thuộc Tính | Loại | Mô tả                                                                                                    |
| ---------- | ---- | -------------------------------------------------------------------------------------------------------- |
| activeStep | số   | Chỉ số của bước đang hoạt động hiện tại. Điều này xác định bước nào cần được làm nổi bật |

</Tab>
</Tabs>
